<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8" />
  <head>
    <title></title>
    <link rel="stylesheet" href="oban.css"/>
    <style>

    </style>
  </head>
  <body class="grid">
    <div id="wrapper">
      <div id="btns" class="btns">
        <button class="btn-flat" onclick="fixed()">Fixed Width</button>
        <button class="btn-flat" onclick="fluid()">Fluid</button>
      </div>
      <div class="fluid-grid12">
        <div class="column1"><div class="name">1</div></div>
        <div class="column1"><div class="name">2</div></div>
        <div class="column1"><div class="name">3</div></div>
        <div class="column1"><div class="name">4</div></div>
        <div class="column1"><div class="name">5</div></div>
        <div class="column1"><div class="name">6</div></div>
        <div class="column1"><div class="name">7</div></div>
        <div class="column1"><div class="name">8</div></div>
        <div class="column1"><div class="name">9</div></div>
        <div class="column1"><div class="name">10</div></div>
        <div class="column1"><div class="name">11</div></div>
        <div class="column1"><div class="name">12</div></div>
      </div>
      <div class="fluid-grid12">
        <div class="column4"><div class="name">4</div></div>
        <div class="column4"><div class="name">4</div></div>
        <div class="column4"><div class="name">4</div></div>
      </div>
      <div class="fluid-grid12">
        <div class="column2"><div class="name">2 Columns</div></div>
        <div class="column10">
          <div class="name">
            10 Columns
            <div class="fluid-grid12">
              <div class="column6"><div class="name">6 Columns</div></div>
              <div class="column6"><div class="name">6 Columns</div></div>
            </div>
          </div>
        </div>
      </div>
      <div class="fluid-grid12">
        <div class="column4 offset2"><div class="name">4 Columns, Offset 2</div></div>
      </div>
      <div class="fluid-grid12 grid-fixed">
        <div class="column-fixed">
          <div class="name">Fixed</div>
        </div>
        <div class="column12">
          <div class="name">12 columns</div>
        </div>
      </div>
      <div class="fluid-grid12 grid-fixed">
        <div class="column-fixed">
          <div class="name">Fixed</div>
        </div>
        <div class="column4">
          <div class="name">4 columns</div>
        </div>
        <div class="column8">
          <div class="name">8 columns</div>
        </div>
      </div>
      <div class="fluid-grid12 grid-fixed-right">
        <div class="column4">
          <div class="name">4 columns</div>
        </div>
        <div class="column8">
          <div class="name">8 columns</div>
        </div>
        <div class="column-fixed">
          <div class="name">Fixed</div>
        </div>
      </div>
      <div class="fluid-grid12 grid-fixed-both">
        <div class="column-left">
          <div class="name">Fixed</div>
        </div>
        <div class="column6">
          <div class="name">6 columns</div>
        </div>
        <div class="column6">
          <div class="name">6 columns</div>
        </div>
        <div class="column-right">
          <div class="name">Fixed</div>
        </div>
      </div>
    </div>
    <script>
      var fluid = function() {
        document.getElementById('wrapper').style.width="100%";
      };
      var fixed = function() {
        document.getElementById('wrapper').style.width="900px";
      };
      if (window.parent) {
        document.getElementById('btns').style.display = 'none';
        document.getElementById('wrapper').style.width="100%";
      }
    </script>
  </body>
</html>
